<template>
    <div class="order-center">
        <van-nav-bar left-text="返回" @nav-bar-text-color="" left-arrow @click-left="onClickLeft" />
        <!-- 地址 -->
        <div>
            <div data-v-f1c077fc="" role="button" tabindex="0" class="van-cell van-cell--clickable" @click="take">
                <div data-v-f1c077fc="" class="van-cell__title"><span data-v-f1c077fc="">收货地址</span>
                    <div data-v-f1c077fc="" class="van-cell__label">
                        <div data-v-f1c077fc="">
                            <div data-v-f1c077fc=""><span data-v-f1c077fc="">{{ listname.name }} </span><span
                                    data-v-f1c077fc="">{{ listname.tel }}
                                </span></div>
                            <div data-v-f1c077fc="">
                                {{ listname.address }}
                            </div>
                        </div>
                    </div>
                </div><i data-v-f1c077fc="" class="van-icon van-icon-arrow van-cell__right-icon"><!----></i>
            </div>
        </div>
        <!-- 优惠卷 -->
        <div class="order-couorpe">
            <van-coupon-cell :coupons="coupons" :chosen-coupon="chosenCoupon" @click="showList = true" />
            <!-- 优惠券列表 -->
            <van-popup v-model="showList" round position="bottom" style="height: 90%; padding-top: 4px;">
                <van-coupon-list :coupons="coupons" :chosen-coupon="chosenCoupon" :disabled-coupons="disabledCoupons"
                    @change="onChange" @exchange="onExchange" />
            </van-popup>
        </div>

        <!-- 列表 -->
        <div v-for="(item, index) in leiiy.checkedGoodsList" :key="index" class="order-ley">
            <img :src="item.picUrl" alt="" height="100%">
            <div>
                <div style="font-size: 14px;">{{ item.goodsName }}</div>
                <div><span style="font-size: 12px; color: gray; border: 1px solid gray; padding: 1px;">{{
                    item.specifications[0] }}</span></div>
                <div style="margin-top: 40px; font-size: 12px; display: flex;">
                    <div style=" width: 120px;">￥<span style="font-size: 16px;">{{ item.price }}</span>.00 </div>
                    <div style="text-align: right; width: 200px; color: gray;">X{{ item.number }}</div>
                </div>
            </div>
        </div>
        <!-- 价格 -->
        <div data-v-f1c077fc="" class="van-cell">
            <div data-v-f1c077fc="" class="van-cell__title"><span data-v-f1c077fc="">商品金额</span></div>
            <div data-v-f1c077fc="" class="van-cell__value"><span style="color: red;">￥{{ leiiy.goodsTotalPrice }}.00</span>
            </div>
        </div>
        <div data-v-f1c077fc="" class="van-cell">
            <div data-v-f1c077fc="" class="van-cell__title"><span data-v-f1c077fc="">邮费</span></div>
            <div data-v-f1c077fc="" class="van-cell__value"><span style="color: red;">￥0.00</span></div>
        </div>
        <div data-v-f1c077fc="" class="van-cell">
            <div data-v-f1c077fc="" class="van-cell__title"><span data-v-f1c077fc="">优惠卷</span></div>
            <div data-v-f1c077fc="" class="van-cell__value"><span style="color: red;">-￥{{ number }}.00</span></div>
        </div>
        <div data-v-f1c077fc="" class="van-cell van-field">
            <div class="van-cell__title van-field__label"><span>订单备注</span></div>
            <div class="van-cell__value van-field__value">
                <div class="van-field__body"><input type="text" placeholder="请输入备注" class="van-field__control"></div>
            </div>
        </div>
        <van-submit-bar :price="(leiiy.goodsTotalPrice * 100) - (number * 100)" button-text="提交订单" @submit="onSubmit" />
    </div>
</template>
<script>
import { checkout, selectlist, submit } from '@/api/index'
import { Toast, AddressList, CouponCell, CouponList } from 'vant';
const coupon = {
    available: 1,
    condition: '无使用门槛\n最多优惠12元',
    reason: '',
    value: 1000,
    name: '优惠券名称',
    startAt: 1489104000,
    endAt: 1514592000,
    valueDesc: '1.5',
    unitDesc: '元',

};
export default {
    name: 'order',
    data() {
        return {
            chosenAddressId: "0",
            listname: "",
            chosenCoupon: -1,
            coupons: [],
            disabledCoupons: [],
            showList: false,
            leiiy: "",
            number: 0
        }
    },
    methods: {
        onSubmit() {
            // alert("提交订单成功");
            if (!this.listname.id) {
                Toast('请填写地址');
            } else {
                // this.leiiy

                submit({ addressId: this.leiiy.addressId, cartId: this.leiiy.cartId, couponId: this.leiiy.couponId, grouponLinkId: this.leiiy.grouponPrice, grouponRulesId: this.leiiy.grouponRulesId, message: "", userCouponId: this.leiiy.userCouponId }).then(res => {
                      this.$router.push({
                                    path: '/orderpay',
                                    query: {
                                        id: res.data.data.orderId
                                    }
                                })
                })

            }
        },
        onChange(index) {
            this.showList = false;
            if (index == 0) {
                this.number = 10
            } else if (index == -1) {
                this.number = 0
            }
            this.chosenCoupon = index;
        },
        onExchange(code) {
            this.coupons.push(coupon);
        },
        take() {
            this.$router.push({ path: '/setorder' })

        },
        onClickLeft() {
            this.$router.push({ path: '/trolley' })
        },
    },
    mounted() {
        this.listname = this.$route.query
        checkout({ "cartId": 0, "addressId": this.$route.query.id, "couponId": 0, "userCouponId": 0, "grouponRulesId": 0 }).then(res => {

            this.leiiy = res.data.data
        })
        selectlist().then(res => {
            coupon.valueDesc = res.data.data.list[0].discount
            coupon.name = res.data.data.list[0].name
            coupon.condition = "满" + res.data.data.list[0].min + "元可用"
            coupon.name = res.data.data.list[0].name
            coupon.description = res.data.data.list[0].desc
            if (res.data.data.list[0].available == true) {
                this.coupons.push(coupon);
            } else if (res.data.data.list[0].available == false) {
                this.disabledCoupons.push(coupon);
            }
        })
    }
}
</script>
<style lang="scss">
.order-ley {
    width: 100%;
    height: 100px;
    padding: 8px 16px;
    margin-top: 10px;
    display: flex;
    background-color: white;
}

.order-couorpe {
    margin-top: 20px;
}

.order-center {
    height: 100vh;
    background-color: #F2F2F2;
}
</style>